<template>
  <div class="icon-container" :style="styleObject">
    <i :class="icon" class="icon" />
    <span class="label" :style="styleObject" v-if="showName">{{ label }}</span>
  </div>
</template>
<script>
export default{
  props:{
    // 图标名称
    iconName:{
      type:String,
      required:true
    },
    // 图标大小
    size:{
      type:[Number,String],
      default:13
    },
    // 图标颜色
    color:{
      type:String,
      default:'#a1a8b6'
    },
    // 是否显示名称
    showName:{
      type:Boolean,
      default:false
    },
    // 名称
    label:{
      type:String,
      default:''
    },
  },
  computed:{
    styleObject () {
      let obj = `fontSize: ${this.size}px;`
      if(this.color){
        obj = `${obj}color:${this.color}!important;`
      }
      return obj
    },
    icon () {
      let icon;
      switch (this.iconName) {
        case 'add':
          icon = `el-icon-circle-plus-outline`
          break;
        case 'edit':
          icon = `el-icon-edit-outline`
          break;
        case 'remove':
          icon = `el-icon-remove-outline`
          break;
        case 'setting':
          icon = `el-icon-setting`
          break;
        case 'refresh':
          icon = `el-icon-refresh-right`
          break;
      }
      return icon
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-container {
  cursor: pointer;
  padding: 0 8px;
  display: inline-block;
  color: $defaultBlue;
  vertical-align: middle;
  font-size: 13px;
}
.label{
  padding-left: 6px;
  font-size: 13px;
}
</style>
